import 'package:ceo_app/utills/ceoFont.dart';
import 'package:flutter/material.dart';
import 'package:ceo_app/components/CustomSwiper/ComSwiper.dart';
import 'package:ceo_app/components/CustomSwiper/CompaginationBuilder.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State<Home> createState() => _HomePageState();
}

class _HomePageState extends State<Home> {
  static int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(backgroundColor: Colors.white, toolbarHeight: 0),
      body: Stack(
        children: [
          SingleChildScrollView(
              padding: EdgeInsets.only(bottom: 62.w),
              child: Column(
                children: [
                  Container(
                    padding: EdgeInsets.fromLTRB(14.w, 0, 14.w, 0), //最外层容器
                    child: Column(
                      children: [
                        const CustomModuleSelectWidget(),
                        SizedBox(height: 8.w),
                        //TODO:没看懂widgetHeight高度的传参数。还有诸多配置和设置不理解比如：前后图片间距，一张图不能拖动，点点点的位置,滚动的间隔时间等
                        Container(
                          decoration: BoxDecoration(boxShadow: [
                            BoxShadow(
                                color: const Color(0x33A4A4A4), //底色,阴影颜色
                                offset: Offset(0, 6.w), //阴影位置,从什么位置开始
                                blurRadius: 12.w, //投影距离1
                                spreadRadius: 0.w)
                          ]),
                          child: ComSwiper(
                              paginationBuilder: ComPaginationBuilder.rect(),
                              bannerList: const [
                                // "http://simg01.gaodunwangxiao.com/uploadimgs/tmp/upload/202305/23/a0da4_20230523113508.png",
                                "http://simg01.gaodunwangxiao.com/uploadimgs/tmp/upload/202305/22/64a15_20230522192948.png",
                              ],
                              onTap: (index) {
                                debugPrint("我点击了$index");
                              },
                              item: (item) => ClipRRect(
                                    borderRadius: BorderRadius.all(
                                      Radius.circular(6.w),
                                    ),
                                    child: Image.network(item),
                                  ),
                              context: context),
                        ),
                        const CustomBannerWidget(),
                      ],
                    ),
                  ),
                  const CustomCircleWidget(),
                  Container(
                    width: double.infinity,
                    height: 1.w,
                    color: const Color(0xFFE7E7E7),
                  ),
                  const CustomListWidget(),
                  const CustomListWidget()
                ],
              )),
          Positioned(
            bottom: 20,
            right: 14,
            child: GestureDetector(
                onTap: () {
                  debugPrint('你好');
                  Navigator.pushNamed(context, '/publish');
                },
                child: Container(
                  alignment: Alignment.center,
                  width: 100,
                  height: 40,
                  decoration: const BoxDecoration(
                      color: Color(0xff222222),
                      borderRadius: BorderRadius.all(Radius.circular(21))),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Image.asset(
                        'assets/images/orangeAdd.png',
                        height: 12.w,
                        width: 12.w,
                      ),
                      const Text(
                        '发布内容',
                        style: TextStyle(
                            fontSize: 14,
                            color: Colors.white,
                            fontWeight: FontWeight.w500),
                      )
                    ],
                  ),
                )),
          )
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        unselectedItemColor: Colors.black,
        selectedItemColor: Colors.black,
        onTap: (int index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home_filled),
            activeIcon: Icon(Icons.home_filled),
            label: '首页',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.image),
            activeIcon: Icon(Icons.image),
            label: '福利',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.man),
            activeIcon: Icon(Icons.man),
            label: '我的',
          ),
        ],
      ),
    );
  }
}

class CustomListWidget extends StatefulWidget {
  const CustomListWidget({super.key});

  @override
  State<CustomListWidget> createState() => _CustomListWidget();
}

class _CustomListWidget extends State<CustomListWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
        padding: EdgeInsets.fromLTRB(14.w, 0, 14.w, 0),
        child: Container(
          padding: EdgeInsets.fromLTRB(0, 24.w, 0, 24.w),
          decoration: BoxDecoration(
              border: Border(
            bottom: BorderSide(
              width: 1.w, //宽度
              color: Color(0xFFE7E7E7), //边框颜色
            ),
          )),
          child:
              Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    ClipOval(
                      child: Image.network(
                        'http://simg01.gaodunwangxiao.com/uploadimgs/tmp/upload/202305/23/d0262_20230523144231.png',
                        width: 40.w,
                        height: 40.w,
                      ),
                    ),
                    SizedBox(
                      width: 7.w,
                    ),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          '这人有猫饼叭',
                          style: TextStyle(
                              color: const Color(0xFF333333),
                              fontSize: 14.sp,
                              fontWeight: FontWeight.w400),
                        ),
                        Row(
                          children: [
                            Image.asset(
                              'assets/images/women.png',
                              height: 12.w,
                              width: 12.w,
                            ),
                            Text(
                              '上海',
                              style: TextStyle(
                                  color: const Color(0xFF999999),
                                  fontSize: 12.sp,
                                  fontWeight: FontWeight.w400),
                            ),
                          ],
                        ),
                      ],
                    ),
                    Container(
                      padding: EdgeInsets.fromLTRB(4.w, 1.w, 4.w, 0),
                      margin: EdgeInsets.fromLTRB(5.w, 3.w, 0, 0),
                      decoration: const BoxDecoration(
                          color: Color(0xFFF3F3F3),
                          borderRadius: BorderRadius.all(Radius.circular(3))),
                      child: Text(
                        '置顶',
                        style: TextStyle(
                            fontSize: 12.sp,
                            color: const Color(0xFF222222),
                            fontWeight: FontWeight.w400),
                      ),
                    ),
                  ],
                ),
                Icon(
                  CeoFont.more,
                  size: 28.sp,
                )
              ],
            ),
            Container(
              padding: EdgeInsets.fromLTRB(0, 10.w, 0, 10.w),
              child: Text(
                '抓怕到了这张，哈哈～有点可爱',
                style: TextStyle(
                    color: const Color(0xFF222222),
                    fontSize: 14.sp,
                    fontWeight: FontWeight.w500),
              ),
            ),
            Wrap(
                spacing: 4.w, //横向间距
                runSpacing: 4.w, //竖向间距
                children: [
                  Container(
                    clipBehavior: Clip.hardEdge,
                    decoration: const BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(3))),
                    child: Image.network(
                      'http://simg01.gaodunwangxiao.com/uploadimgs/tmp/upload/202305/24/e60f0_20230524172716.png',
                      width: 88.w,
                      height: 88.w,
                    ),
                  ),
                  Container(
                    clipBehavior: Clip.hardEdge,
                    decoration: const BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(3))),
                    child: Image.network(
                      'http://simg01.gaodunwangxiao.com/uploadimgs/tmp/upload/202305/24/56511_20230524173454.png',
                      width: 88.w,
                      height: 88.w,
                    ),
                  ),
                  Container(
                    clipBehavior: Clip.hardEdge,
                    decoration: const BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(3))),
                    child: Image.network(
                      'http://simg01.gaodunwangxiao.com/uploadimgs/tmp/upload/202305/24/97c71_20230524173840.png',
                      width: 88.w,
                      height: 88.w,
                    ),
                  ),
                  Container(
                    clipBehavior: Clip.hardEdge,
                    decoration: const BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(3))),
                    child: Image.network(
                      'http://simg01.gaodunwangxiao.com/uploadimgs/tmp/upload/202305/24/f71aa_20230524175424.png',
                      width: 88.w,
                      height: 88.w,
                    ),
                  ),
                  Container(
                    clipBehavior: Clip.hardEdge,
                    decoration: const BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(3))),
                    child: Image.network(
                      'http://simg01.gaodunwangxiao.com/uploadimgs/tmp/upload/202305/24/c4324_20230524175455.png',
                      width: 88.w,
                      height: 88.w,
                    ),
                  ),
                  Container(
                    clipBehavior: Clip.hardEdge,
                    decoration: const BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(3))),
                    child: Image.network(
                      'http://simg01.gaodunwangxiao.com/uploadimgs/tmp/upload/202305/24/1d237_20230524175534.png',
                      width: 88.w,
                      height: 88.w,
                    ),
                  )
                ]),
            Container(
              // TODO长度有问题
              // width: 120.w,
              height: 28.w,
              margin: EdgeInsets.only(top: 10.w),
              padding: EdgeInsets.fromLTRB(6.w, 0, 10.w, 0),
              decoration: const BoxDecoration(
                color: Color(0xFFF4F4F4),
                borderRadius: BorderRadius.all(Radius.circular(19)),
              ),
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Container(
                        margin: EdgeInsets.fromLTRB(0, 2.w, 2.w, 0),
                        child: Image.asset(
                          'assets/images/redCicler.png',
                          width: 18.w,
                          height: 18.w,
                        )),
                    Text('和喵星人的日常',
                        style: TextStyle(
                            color: const Color(0xFF222222),
                            fontSize: 12.sp,
                            fontWeight: FontWeight.w600))
                  ]),
            ),
            CustomCommonWidget()
          ]),
        ));
  }
}

///评论相关组件
class CustomCommonWidget extends StatefulWidget {
  const CustomCommonWidget({super.key});

  @override
  State<CustomCommonWidget> createState() => _CustomCommonWidget();
}

class _CustomCommonWidget extends State<CustomCommonWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
        child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
      SizedBox(
        height: 10.w,
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Row(
            children: [
              Text(
                '艾米丽:',
                style: TextStyle(
                    color: const Color(0xFF333333),
                    fontWeight: FontWeight.w500,
                    fontSize: 13.w),
              ),
              Text(
                '可可爱爱～想抱走',
                style: TextStyle(
                    color: const Color(0xFF333333),
                    fontWeight: FontWeight.w400,
                    fontSize: 13.w),
              )
            ],
          ),
          Text(
            '345赞',
            style: TextStyle(
                color: const Color(0xFF999999),
                fontSize: 12.w,
                fontWeight: FontWeight.w400),
          )
        ],
      ),
      SizedBox(
        height: 10.w,
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Row(
            children: [
              Text(
                'FrobroK:',
                style: TextStyle(
                    color: const Color(0xFF333333),
                    fontWeight: FontWeight.w500,
                    fontSize: 13.w),
              ),
              Text(
                '又想骗我养猫',
                style: TextStyle(
                    color: const Color(0xFF333333),
                    fontWeight: FontWeight.w400,
                    fontSize: 13.w),
              )
            ],
          ),
          Text(
            '23赞',
            style: TextStyle(
                color: const Color(0xFF999999),
                fontSize: 12.w,
                fontWeight: FontWeight.w400),
          )
        ],
      ),
      SizedBox(
        height: 10.w,
      ),
      Text(
        '全部123条评论',
        style: TextStyle(
            color: const Color(0xFF999999),
            fontSize: 14.sp,
            fontWeight: FontWeight.w400),
      ),
      SizedBox(
        height: 10.w,
      ),
      Row(
        children: [
          Container(
            width: 154.w,
            height: 34.w,
            padding: EdgeInsets.only(left: 7.w),
            alignment: Alignment.centerLeft,
            decoration: const BoxDecoration(
              color: Color(0xFFF5F5F5),
              borderRadius: BorderRadius.all(Radius.circular(4)),
            ),
            child: Text(
              '说点什么',
              style: TextStyle(
                  color: const Color(0xFF999999),
                  fontSize: 14.sp,
                  fontWeight: FontWeight.w400),
            ),
          ),
          SizedBox(
            width: 20.w,
          ),
          Expanded(
              child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  Image.asset(
                    'assets/images/show.png',
                    height: 25.w,
                    width: 25.w,
                  ),
                  SizedBox(
                    width: 4.w,
                  ),
                  Text(
                    '28',
                    style: TextStyle(
                        color: const Color(0xFF333333),
                        fontSize: 12.sp,
                        fontWeight: FontWeight.w400),
                  )
                ],
              ),
              Row(
                children: [
                  Image.asset(
                    'assets/images/comment.png',
                    height: 28.w,
                    width: 28.w,
                  ),
                  SizedBox(
                    width: 4.w,
                  ),
                  Text(
                    '4',
                    style: TextStyle(
                        color: const Color(0xFF333333),
                        fontSize: 12.sp,
                        fontWeight: FontWeight.w400),
                  )
                ],
              ),
              Image.asset(
                'assets/images/share.png',
                height: 28.w,
                width: 28.w,
              ),
            ],
          ))
        ],
      )
    ]));
  }
}

/// 圈子筛选组件
class CustomCircleWidget extends StatefulWidget {
  const CustomCircleWidget({super.key});

  @override
  State<CustomCircleWidget> createState() => _CustomCircleWidget();
}

class ICircleData {
  int id;
  String text;
  bool activeCircle;
  ICircleData(this.id, this.text, this.activeCircle);
}

class _CustomCircleWidget extends State<CustomCircleWidget> {
  List<ICircleData> circleData = [
    ICircleData(1, '全部', true),
    ICircleData(2, '软泥熊小酒管', false),
    ICircleData(3, '电竞好物', false),
    ICircleData(5, '游戏周边', false),
    ICircleData(6, '汉唐服饰', false),
  ];

  void handleCircleSelect(id) {
    for (var element in circleData) {
      if (element.id == id) {
        element.activeCircle = true;
      } else {
        element.activeCircle = false;
      }
    }
    setState(() {
      circleData;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Stack(children: [
      Container(
          width: double.infinity,
          height: 52.w,
          margin: EdgeInsets.only(top: 9.w),
          padding: EdgeInsets.fromLTRB(14.w, 0, 51.w, 0),
          child: ListView.builder(
              itemCount: circleData.length,
              scrollDirection: Axis.horizontal,
              itemBuilder: (
                BuildContext context,
                int index,
              ) {
                return circleData[index].activeCircle
                    ? Container(
                        alignment: Alignment.center,
                        margin: EdgeInsets.only(right: 20.w),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text(
                              circleData[index].text,
                              style: TextStyle(
                                  color: const Color(0xFF333333),
                                  fontSize: 18.w,
                                  fontWeight: FontWeight.w600),
                            ),
                            SizedBox(
                              height: 4.w,
                            ),
                            Container(
                              width: 14.w,
                              height: 3.w,
                              decoration: BoxDecoration(
                                color: const Color(0xFFFF5D34),
                                borderRadius:
                                    BorderRadius.all(Radius.circular(15.sp)),
                              ),
                            )
                          ],
                        ),
                      )
                    : GestureDetector(
                        onTap: () {
                          handleCircleSelect(circleData[index].id);
                        },
                        child: Container(
                          alignment: Alignment.center,
                          margin: EdgeInsets.only(right: 20.w),
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Text(
                                circleData[index].text,
                                style: TextStyle(
                                    color: const Color(0xFF333333),
                                    fontSize: 16.w,
                                    fontWeight: FontWeight.w500),
                              ),
                              SizedBox(
                                height: 4.w,
                              ),
                              Container(
                                width: 12.w,
                                height: 3.w,
                                decoration: BoxDecoration(
                                  color: Colors.white,
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(15.sp)),
                                ),
                              )
                            ],
                          ),
                        ));
              })),
      Positioned(
          right: 0.w,
          top: 12.w,
          child: Container(
              height: 37.w,
              width: 61.w,
              alignment: Alignment.center,
              decoration: BoxDecoration(color: Colors.white, boxShadow: [
                BoxShadow(
                    color: const Color(0x80000000), //底色,阴影颜色
                    offset: Offset(-9.w, 0), //阴影位置,从什么位置开始
                    blurRadius: 10.w, //投影距离1
                    spreadRadius: -10.w)
              ]),
              child: Image.asset(
                'assets/images/moreCircle.png',
                width: 20.w,
                height: 20.w,
              ))),
    ]);
  }
}

///banner组件
class CustomBannerWidget extends StatelessWidget {
  const CustomBannerWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: EdgeInsets.only(top: 18.w),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            GestureDetector(
              onTap: () => {},
              child: Container(
                  width: 80.w,
                  height: 96.w,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                      color: Colors.white,
                      border: Border.all(color: const Color(0xffDFDFDF)),
                      borderRadius: const BorderRadius.all(Radius.circular(7)),
                      boxShadow: [
                        BoxShadow(
                            color: const Color(0x8FE8E8E8), //底色,阴影颜色
                            offset: Offset(0, 6.w), //阴影位置,从什么位置开始
                            blurRadius: 6.w, //投影距离1
                            spreadRadius: -4.w)
                      ]),
                  child: Column(
                    children: [
                      SizedBox(height: 10.w),
                      Image.asset(
                        'assets/images/sign.png',
                        width: 28.w,
                        height: 28.w,
                      ),
                      SizedBox(height: 3.w),
                      Text(
                        '签到',
                        style: TextStyle(
                            color: const Color(0xFF222222),
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w600),
                      ),
                      SizedBox(height: 1.w),
                      Text(
                        '点击签到',
                        style: TextStyle(
                            color: const Color(0xFF999999),
                            fontSize: 12.sp,
                            fontWeight: FontWeight.w400),
                      )
                    ],
                  )),
            ),
            GestureDetector(
              onTap: () => {},
              child: Container(
                  width: 80.w,
                  height: 96.w,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                      color: Colors.white,
                      border: Border.all(color: const Color(0xffDFDFDF)),
                      borderRadius: const BorderRadius.all(Radius.circular(7)),
                      boxShadow: [
                        BoxShadow(
                            color: const Color(0x8FE8E8E8), //底色,阴影颜色
                            offset: Offset(0, 6.w), //阴影位置,从什么位置开始
                            blurRadius: 6.w, //投影距离1
                            spreadRadius: -4.w)
                      ]),
                  child: Column(
                    children: [
                      SizedBox(height: 10.w),
                      Image.asset(
                        'assets/images/list.png',
                        width: 28.w,
                        height: 28.w,
                      ),
                      SizedBox(height: 3.w),
                      Text(
                        '排行榜',
                        style: TextStyle(
                            color: const Color(0xFF222222),
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w600),
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Stack(
                            children: [
                              Padding(
                                padding: EdgeInsets.fromLTRB(4.w, 7.w, 10.w, 0),
                                child: Row(children: [
                                  ClipOval(
                                    child: Image.network(
                                      'http://simg01.gaodunwangxiao.com/uploadimgs/tmp/upload/202305/23/fd69c_20230523135504.png',
                                      width: 16.w,
                                      height: 16.w,
                                    ),
                                  ),
                                  SizedBox(width: 5.w),
                                  ClipOval(
                                    child: Image.network(
                                      'http://simg01.gaodunwangxiao.com/uploadimgs/tmp/upload/202305/23/d0262_20230523144231.png',
                                      width: 16.w,
                                      height: 16.w,
                                    ),
                                  ),
                                  SizedBox(width: 5.w),
                                  ClipOval(
                                    child: Image.network(
                                      'http://simg01.gaodunwangxiao.com/uploadimgs/tmp/upload/202305/23/40098_20230523141019.png',
                                      width: 16.w,
                                      height: 16.w,
                                    ),
                                  ),
                                ]),
                              ),
                              Positioned(
                                left: 16.w,
                                top: 1.w,
                                child: Image.asset(
                                  'assets/images/gold.png',
                                  width: 11.w,
                                  height: 11.w,
                                ),
                              ),
                              Positioned(
                                  left: 36.w,
                                  top: 1.w,
                                  child: Image.asset(
                                    'assets/images/silver.png',
                                    width: 11.w,
                                    height: 11.w,
                                  )),
                              Positioned(
                                  left: 57.w,
                                  top: 1.w,
                                  child: Image.asset(
                                    'assets/images/copper.png',
                                    width: 11.w,
                                    height: 11.w,
                                  )),
                            ],
                          )
                        ],
                      )
                    ],
                  )),
            ),
            GestureDetector(
              onTap: () => {},
              child: Container(
                  width: 80.w,
                  height: 96.w,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                      color: Colors.white,
                      border: Border.all(color: const Color(0xffDFDFDF)),
                      borderRadius: const BorderRadius.all(Radius.circular(7)),
                      boxShadow: [
                        BoxShadow(
                            color: const Color(0x8FE8E8E8), //底色,阴影颜色
                            offset: Offset(0, 6.w), //阴影位置,从什么位置开始
                            blurRadius: 6.w, //投影距离1
                            spreadRadius: -4.w)
                      ]),
                  child: Column(
                    children: [
                      SizedBox(height: 10.w),
                      Image.asset(
                        'assets/images/welfare.png',
                        width: 28.w,
                        height: 28.w,
                      ),
                      SizedBox(height: 3.w),
                      Text(
                        '福利',
                        style: TextStyle(
                            color: const Color(0xFF222222),
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w600),
                      ),
                      SizedBox(height: 1.w),
                      Text(
                        '即将开放',
                        style: TextStyle(
                            color: const Color(0xFF999999),
                            fontSize: 12.sp,
                            fontWeight: FontWeight.w400),
                      )
                    ],
                  )),
            ),
            GestureDetector(
              onTap: () => {},
              child: Container(
                  width: 80.w,
                  height: 96.w,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                      color: Colors.white,
                      border: Border.all(color: const Color(0xffDFDFDF)),
                      borderRadius: const BorderRadius.all(Radius.circular(7)),
                      boxShadow: [
                        BoxShadow(
                            color: const Color(0x8FE8E8E8), //底色,阴影颜色
                            offset: Offset(0, 6.w), //阴影位置,从什么位置开始
                            blurRadius: 6.w, //投影距离1
                            spreadRadius: -4.w)
                      ]),
                  child: Column(
                    children: [
                      SizedBox(height: 10.w),
                      Image.asset(
                        'assets/images/trevi.png',
                        width: 28.w,
                        height: 28.w,
                      ),
                      SizedBox(height: 3.w),
                      Text(
                        '许愿池',
                        style: TextStyle(
                            color: const Color(0xFF222222),
                            fontSize: 14.sp,
                            fontWeight: FontWeight.w600),
                      ),
                      SizedBox(height: 1.w),
                      Text(
                        '343个愿望',
                        style: TextStyle(
                            color: const Color(0xFF999999),
                            fontSize: 12.sp,
                            fontWeight: FontWeight.w400),
                      )
                    ],
                  )),
            )
          ],
        ));
  }
}

/// 顶部模块筛选类组件
class CustomModuleSelectWidget extends StatefulWidget {
  const CustomModuleSelectWidget({super.key});
  @override
  State<CustomModuleSelectWidget> createState() => _CustomModuleSelectWidget();
}

class ICustomModuleSelectWidget {
  int id;
  String text;
  bool active;
  ICustomModuleSelectWidget(this.id, this.text, this.active);
}

class _CustomModuleSelectWidget extends State<CustomModuleSelectWidget> {
  // ignore: non_constant_identifier_names
  List<ICustomModuleSelectWidget> ModuleSelectData = [
    ICustomModuleSelectWidget(1, '推荐', true),
    ICustomModuleSelectWidget(2, '最新', false),
    ICustomModuleSelectWidget(3, '关注', false),
  ];

  void handleModuleSelect(id) {
    for (var element in ModuleSelectData) {
      if (element.id == id) {
        element.active = true;
      } else {
        element.active = false;
      }
    }
    setState(() {
      ModuleSelectData;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        ...ModuleSelectData.map((item) {
          return GestureDetector(
            onTap: () {
              if (item.active) return; //过滤点击自己的行为
              handleModuleSelect(item.id);
            },
            child: Padding(
              padding: item.active
                  ? const EdgeInsets.only(bottom: 0)
                  : EdgeInsets.only(bottom: 3.w),
              child: Row(
                children: [
                  Text(
                    item.text,
                    style: TextStyle(
                        fontWeight:
                            item.active ? FontWeight.w600 : FontWeight.w500,
                        fontSize: item.active ? 26.sp : 16.sp,
                        color: item.active
                            ? const Color(0xFF333333)
                            : const Color(0xFF333333)),
                  ),
                  SizedBox(
                    width: 14.w,
                  ),
                ],
              ),
            ),
          );
        }),
      ],
    );
  }
}
